<!DOCTYPE html>
<html lang="en">

<head>

    <!-- ctrl + / 插入单行注释 注释是给人看的 而不是给浏览器看的 -->
    <!-- meta=元信息/基础信息 -->
    <!-- charset="UTF-8" 字符集是UTF-8 一般不修改 -->
    <meta charset="UTF-8">

    <!-- 约定俗成、千篇一律的元信息 无需修改 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- 页面标题 会显示在页面顶部的选项卡中 -->
    <title>美团正版</title>

    <!-- CSS（Cascading Style Sheet 层叠样式表） = 管页面样式 -->
    <style>
        /* CSS语言语法 定义HTML标签/元素的样式 */

        /* 选中所有h1标签 + 定义其样式 */
        h1 {
            color: red;
            font-size: 100px;
        }

    </style>
</head>

<!-- 页面主体 肉眼可见 -->
<body>
    
    <!-- HTML（Hyper Text Markup Language 超级文本（浏览器能够将这个文本渲染为狠nice的页面）标记语言） = 标签/元素 = 管页面的内容 -->
    <h1 id="sj">师姐你好！</h1>

    <h1>Hello World!</h1>

    <!-- JS = JavaScript = 管页面交互 -->
    <script>

        // id为sj的元素点击时 执行一个功能/function
        sj.onclick = function(){
            // 警告框提示：死开
            alert("死开!");
        }
    </script>

</body>

</html>